<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :inline="true" :model="listQuery" class="demo-form-inline">
        <el-form-item label="项目名称">
          <el-input v-model="listQuery.projectName" placeholder="项目名称" clearable/>
        </el-form-item>
        <el-form-item label="发货时间">
          <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              @change="handleDateChange"
          />
        </el-form-item>
        <el-form-item label="甲方联系人">
          <el-input v-model="listQuery.clientContact" placeholder="甲方联系人" clearable/>
        </el-form-item>
        <el-form-item label="负责人">
          <el-input v-model="listQuery.leaderName" placeholder="项目负责人" clearable/>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select v-model="listQuery.orderStatus" placeholder="全部" clearable style="width: 100px">
            <el-option label="待审核" :value="0"/>
            <el-option label="已审核" :value="1"/>
            <el-option label="已修改待审核" :value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item label="是否正版">
          <el-select v-model="listQuery.isGenuine" placeholder="全部" clearable style="width: 100px">
            <el-option label="是" :value="true"/>
            <el-option label="否" :value="false"/>
          </el-select>
        </el-form-item>
        <el-form-item label="是否异常">
          <el-select v-model="listQuery.isAbnormalDelivery" placeholder="全部" clearable style="width: 100px">
            <el-option label="是" :value="true"/>
            <el-option label="否" :value="false"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="action-container">
      <el-button type="primary" @click="handleCreate">新增发货订单</el-button>
    </div>

    <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="正在加载中..."
        border
        fit
        highlight-current-row
        style="width: 100%"
        class="table-container"
    >

      <el-table-column label="项目名称" prop="projectName" show-overflow-tooltip/>

      <el-table-column label="甲方联系人" prop="clientContact" align="center"/>
      <el-table-column label="甲方电话" prop="clientPhone" align="center"/>
      <el-table-column label="负责人" prop="leaderName" align="center"/>
      <el-table-column label="部门" prop="leaderDepartment" align="center"/>
      <el-table-column label="正版软件" width="80" align="center">
        <template #default="scope">
          <el-tag :type="scope.row.isGenuine ? 'success' : 'danger'">
            {{ scope.row.isGenuine ? '是' : '否' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="异常发货" align="center">
        <template #default="scope">
          <el-tag :type="scope.row.isAbnormalDelivery ? 'danger' : 'success'">
            {{ scope.row.isAbnormalDelivery ? '是' : '否' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" align="center">
        <template #default="scope">
          <el-tag :type="getOrderStatusType(scope.row.orderStatus)">
            {{ getOrderStatusText(scope.row.orderStatus) }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column label="发货时间" prop="deliveryDate" align="center"/>
      <el-table-column label="操作" width="300" align="center">
        <template #default="scope">
          <el-button size="mini" type="primary" @click="handleView(scope.row)">查看</el-button>
          <el-button
              size="mini"
              type="success"
              :disabled="scope.row.orderStatus === 1"
              @click="handleEdit(scope.row)"
          >编辑
          </el-button>
          <el-button
              size="mini"
              type="danger"
              :disabled="scope.row.orderStatus === 1"
              @click="handleDelete(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listQuery.pageNum"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="listQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          style="float: right"
      />
    </div>
  </div>
</template>

<script>
import {pageDeliveryOrders, deleteDeliveryOrder} from '@/api/delivery';
import {parseTime} from '@/utils/time';

export default {
  name: 'DeliveryOrderList',
  filters: {
    formatDate(time) {
      return parseTime(time, '{y}-{m}-{d}');
    }
  },
  data() {
    return {
      list: [],
      total: 0,
      listLoading: false,
      dateRange: [],
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        projectName: undefined,
        deliveryStartDate: undefined,
        deliveryEndDate: undefined,
        clientContact: undefined,
        leaderName: undefined,
        orderStatus: undefined,
        isGenuine: undefined,
        isAbnormalDelivery: undefined
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      pageDeliveryOrders(this.listQuery).then(response => {
        this.list = response.data.records;
        this.total = response.data.total;
        this.listLoading = false;
      }).catch(() => {
        this.listLoading = false;
      });
    },
    handleSearch() {
      this.listQuery.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.dateRange = [];
      this.listQuery = {
        pageNum: 1,
        pageSize: 10,
        projectName: undefined,
        deliveryStartDate: undefined,
        deliveryEndDate: undefined,
        clientContact: undefined,
        leaderName: undefined,
        orderStatus: undefined,
        isGenuine: undefined,
        isAbnormalDelivery: undefined
      };
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
    handleDateChange(date) {
      if (date) {
        this.listQuery.deliveryStartDate = date[0];
        this.listQuery.deliveryEndDate = date[1];
      } else {
        this.listQuery.deliveryStartDate = undefined;
        this.listQuery.deliveryEndDate = undefined;
      }
    },
    getOrderStatusType(status) {
      switch (status) {
        case 0:
          return 'warning';
        case 1:
          return 'success';
        case 2:
          return 'info';
        default:
          return 'info';
      }
    },
    getOrderStatusText(status) {
      switch (status) {
        case 0:
          return '待审核';
        case 1:
          return '已审核';
        case 2:
          return '已修改待审核';
        default:
          return '未知状态';
      }
    },
    handleCreate() {
      this.$router.push({path: '/delivery/create'});
    },
    handleView(row) {
      this.$router.push({path: `/delivery/detail/${row.id}`});
    },
    handleEdit(row) {
      this.$router.push({path: `/delivery/edit/${row.id}`});
    },
    handleDelete(row) {
      this.$confirm('确认删除该发货订单吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDeliveryOrder(row.id).then(response => {
          this.$message.success(response.msg || '删除成功');
          this.getList();
        });
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.filter-container {
  margin: 20px 20px;
}

.table-container {
  margin: 20px 20px;
}

.action-container {
  margin: 20px 20px;
}
</style>
